<!-- 缴费查询 -->
<template>
	<view class="no-warpper">
		<view class="nl-shadow-box">
			<view class="nl-flex-title">
				<text>查询条件 (非必填)</text>
				<view class="reset" @click="onReset()">重置</view>
			</view>

			<view class="nl-flex-list" @click="primeRateShow = true">
				<text class="nl-margin-right">缴费方式</text>
				<view :class="primeRateName ? 'right':'right-grey'">
					{{primeRateName ? primeRateName : '选择缴费方式'}}
				</view>
				<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
			</view>

			<view class="nl-flex-list" @click="changeDate('startTime')">
				<text class="nl-margin-right">起始时间</text>
				<view :class="pamras.startTime ? 'right':'right-grey'">
					{{pamras.startTime ? pamras.startTime : '选择起始时间'}}
				</view>
				<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
			</view>
			<view class="nl-flex-list" @click="changeDate('endTime')">
				<text class="nl-margin-right">结束时间</text>
				<view :class="pamras.endTime ? 'right':'right-grey'">{{pamras.endTime ? pamras.endTime : '选择结束时间'}}
				</view>
				<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
			</view>

			<view class="nl-flex-list" @click="selectFloor()">
				<text class="nl-margin-right">楼栋</text>
				<view :class="data.floorName ? 'right':'right-grey'">{{data.floorName ? data.floorName : '请选择楼栋'}}</view>
				<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
			</view>
			
			<view class="nl-flex-list" @click="selectUnit()">
				<text class="nl-margin-right">单元</text>
				<view :class="data.unitNum ? 'right':'right-grey'">{{data.unitNum ? data.unitNum+"单元" : '请选择单元'}}</view>
				<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
			</view>
			<view class="nl-flex-list" @click="selectHouse()">
				<text class="nl-margin-right">房屋</text>
				<view :class="data.roomNum ? 'right':'right-grey'">{{data.roomNum ? data.roomNum+"室": '请选择房屋'}}</view>
				<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
			</view>

			<!-- <view class="nl-flex-list">
				<text class="nl-margin-right">流水单</text>
				<u-input class="input" v-model="pamras.feeOrderId" type="text" placeholder="输入流水单号" />
			</view> -->

			<view class="nl-flex-list">
				<text class="nl-margin-right">操作人</text>
				<u-input class="input" v-model="pamras.tollCollertorName" type="text" placeholder="输入操作人名称" />
			</view>

			<view class="button-lg" @click="query()">
				<button>查询</button>
			</view>
		</view>
		
		<u-picker mode="selector" v-model="primeRateShow" :range="payMethods" range-key="name" @confirm="primeRateConfirm"></u-picker>
		<u-picker mode="time" v-model="dateShow" :params="dateParams" @confirm="dateConfirm"></u-picker>
	</view>
</template>

<script>
	import goToUrl from '@/common/goToUrl.js'
	import { getByType } from '@/api/fee'
	
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				data:{
					floorName: '',
					floorId: '',
					unitNum: '',
					unitId: '',
					roomNum: '',
					roomId: '',
				},
				
				pamras: {
					primeRate: '', // 缴费方式
					startTime: '', // 查询起始时间
					endTime: '', // 查询结束时间
					payObjType: '', // 缴费对象类型
					feeOrderId: '', // 流水单号
					tollCollertorName: '', // 操作人名称
					payerObjId: '',	// 房间编号
					payObjType:'3333'
				},
				
				primeRateName:'',
				primeRateShow:false,
				
				changeDateKey: '',
				dateParams: {
					year: true,
					month: true,
					day: true,
				},
				dateShow: false,
				startTimeStamp: 0, // 起始时间戳
				endTimeStamp: 0, // 结束时间戳
				payMethods: [{
					"name": "现金",
					"statusCd": "1"
				}, {
					"name": "POS刷卡",
					"statusCd": "2"
				}, {
					"name": "微信二维码",
					"statusCd": "3"
				}, {
					"name": "支付宝二维码",
					"statusCd": "4"
				}, {
					"name": "微信公众号支付",
					"statusCd": "5"
				}, {
					"name": "微信小程序支付",
					"statusCd": "6"
				}, {
					"name": "转账",
					"statusCd": "7"
				}],
			}
		},
		onShow() {
		},
		onLoad(option) {
			this.getPayFeeList()
			
			console.log('option',option)
			this.data.floorName = option.floorName
			this.data.floorId = option.floorId
			
			this.data.unitNum = option.unitNum
			this.data.unitId = option.unitId
		},
		computed: {
			...mapState('user', ['userCommunity'])
		},
		methods: {
			/**
			 * 获取缴费清单
			 */
			getPayFeeList() {
				let self = this
				let parmas = {
					name:'pay_fee_detail',
					type:'prime_rate'
				}
				getByType(parmas).then((res) => {
					self.payMethods = res
				})
			},
			/**
			 * 选择缴费方式
			 */
			primeRateConfirm(val){
				console.log(val)
				let i = val[0]
				let self = this
				self.primeRateName = self.payMethods[i].name
				self.pamras.primeRate = self.payMethods[i].statusCd
			},
			/**
			 * 选择时间
			 */
			changeDate(key) {
				let self = this
				self.dateShow = true
				self.changeDateKey = key
			},
			/**
			 * 选择时间确认
			 */
			dateConfirm(val) {
				let self = this
				let time = `${val.year}-${val.month}-${val.day}`
				if (self.changeDateKey == 'startTime') {
					self.startTimeStamp = (new Date(time)).getTime() / 1000
					if (self.endTimeStamp != 0 && self.startTimeStamp > self.endTimeStamp) {
						uni.showToast({
							title: '起始时间不能大于结束时间',
							icon: 'none',
							duration: 2000
						})
						return false
					}
					self.pamras.startTime = time

				} else {
					self.endTimeStamp = (new Date(time)).getTime() / 1000
					if (self.endTimeStamp < self.startTimeStamp) {
						uni.showToast({
							title: '结束时间不能小于起始时间',
							icon: 'none',
							duration: 2000
						})
						return false
					}
					self.pamras.endTime = time
				}
			},
			/**
			 * 选择楼栋
			 */
			selectFloor() {
				uni.navigateTo({
					url:'../../selectHome/selectFloors/selectFloors'
				})
			},
			/**
			 * 选择单元
			 */
			selectUnit() {
				if (!this.data.floorId) {
					uni.showToast({
						title: "请先选择楼栋",
						icon: 'none',
						duration: 1500
					})
					return
				}
				uni.navigateTo({
					url: `../../selectHome/selectUnit/selectUnit?floorId=${this.data.floorId}`
				})
			},
			/**
			 * 选择房屋
			 */
			selectHouse() {
				if (!this.data.floorId) {
					uni.showToast({
						title: "请先选择楼栋",
						icon: 'none',
						duration: 1500
					})
					return
				}
			
				if (!this.data.unitId) {
					uni.showToast({
						title: "请先选择单元",
						icon: 'none',
						duration: 1500
					})
					return
				}
				uni.navigateTo({
					url: `../../selectHome/selectHouse/selectHouse?floorId=${this.data.floorId}&unitId=${this.data.unitId}`
				})
			},
			/**
			 * 重置
			 */
			onReset(){
				
				this.primeRateName = ''
				
				this.data = {
					floorName: '',
					floorId: '',
					unitNum: '',
					unitId: '',
					roomNum: '',
					roomId: '',
				}
				
				this.pamras = {
					primeRate: '', // 缴费方式
					startTime: '', // 查询起始时间
					endTime: '', // 查询结束时间
					payObjType: '', // 缴费对象类型
					feeOrderId: '', // 流水单号
					tollCollertorName: '', // 操作人名称
					payerObjId: '',	// 房间编号
					payObjType:'3333'
				}
			},
			/**
			 * 查询
			 */
			query(){
				this.pamras.payerObjId = this.data.roomId ? this.data.roomId : ''
				let pamras = JSON.stringify(this.pamras)
				
				if (this.data.floorId) {
					let text = '';
					let state = '0';
					if (!this.data.unitId && state == '0') {
						text = '请选择单元'
						state = '1'
					}
					
					if (!this.data.roomId && state == '0') {
						text = '请选择房屋'
						state = '1'
					}
					
					if (state == '1') {
						uni.showToast({
							title: text,
							icon: 'none',
							duration: 1500
						})
						return false
					}
				}
				
				goToUrl(`/pages/home/businessQuery/payList/payList?pamras=${pamras}`)
			}
		}
	}
</script>

<style lang="scss">
	.nl-flex-title{
		position: relative;
	}
	.reset{
		color: $uni-color-primary;
		position: absolute;
		padding: 24rpx;
		right:0
	}
	.reset:active{
		background-color: #f9f9f9;
	}
</style>
